<template>
  <div>
    <div class="tab-container">
      <el-form v-model="state.pagination">
        <el-row>
          <el-col span="3">
            <el-form-item label="包装类别">
              <el-input  placeholder="请输入包装类别" v-model="state.formData.type"  clearable />
            </el-form-item>
          </el-col>
          <el-col span="1">&emsp;</el-col>
          <el-col span="3">
            <el-button  type="primary" @click="selectPackage()">查询</el-button>
            <el-button  type="primary" @click="addPackage()" >新增</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>


    <el-table :data="state.dataList"  style="width: 100%">
      <el-table-column label="ID" align="center" prop="id"></el-table-column>
      <el-table-column label="包装类型" align="center" prop="type"></el-table-column>
      <el-table-column label="成本" align="center" prop="cost"></el-table-column>
      <el-table-column label="售价" align="center" prop="price"></el-table-column>
      <!--      <el-table-column label="账单创建时间" align="center" prop="createTime"></el-table-column>-->
      <el-table-column label="操作" align="center" fixed="right" width="180">
        <template v-slot="{row}">
          <el-button link type="primary" size="small" @click="handleUpdate(row)">修改</el-button>
          <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        class="pagiantion"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :current-page="state.pagination.currentPage"
        :page-sizes="[1, 2, 3]"
        :page-size="state.pagination.pageSize"
        :total="state.pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>

    <!-- 新增标签弹层 -->
    <el-dialog
        v-model="state.dialogFormVisible"
        title="新增包装种类"
        width="40%"
    >
      <template #footer>
        <span class="dialog-footer">
          <div class="tab-container">
            <el-form v-model="state.addData">
              <el-row class="dialog-container">
                <el-col span="3">
                  <el-form-item label="包装类别:">
                    <el-input  placeholder="请输入包装类型" v-model="state.addData.type"  clearable />
                  </el-form-item>
                </el-col>
                <el-col span="3">
                  <el-form-item label="成本价格:">
                    <el-input  placeholder="请输入成本" v-model="state.addData.cost"  clearable />
                  </el-form-item>
                </el-col>
                <el-col span="3">
                  <el-form-item label="销售价格:">
                    <el-input  placeholder="请输入售价" v-model="state.addData.price" clearable />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <el-button @click="cancel()">取消</el-button>
          <el-button type="primary" @click="handleAdd">确定</el-button>
        </span>
      </template>
    </el-dialog>



    <!-- 编辑标签弹层 -->
    <el-dialog
        v-model="state.dialogFormVisible4Edit"
        title="修改包装"
        width="40%"
    >
      <template #footer>
        <span class="dialog-footer">
          <div class="tab-container">
            <el-form v-model="state.updateData">
              <el-row class="dialog-container">
                <el-col span="3">
                  <el-form-item label="包装类别:">
                  <el-input  placeholder="请输入包装类型" v-model="state.updateData.type"  clearable />
                  </el-form-item>
                </el-col>
                <el-col span="3">
                  <el-form-item label="成本价格:">
                    <el-input  placeholder="请输入成本" v-model="state.updateData.cost"  clearable />
                  </el-form-item>
                </el-col>
                <el-col span="3">
                  <el-form-item label="销售价格:">
                    <el-input  placeholder="请输入售价" v-model="state.updateData.price" clearable />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <el-button @click="cancel()">取消</el-button>
          <el-button type="primary" @click="handleEdit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {reactive} from "vue";
import instance from "../../../request";
import { ElMessageBox, ElMessage } from 'element-plus';

const state = reactive({
  dataList: [],//表格数据
  formData: {},
  addData: {},
  updateData:{},
  dialogFormVisible: false,//添加表单是否可见
  dialogFormVisible4Edit: false,//编辑表单是否可见
  rules: {//校验规则
    type: [{required: true, message: '包装类别为必填项', trigger: 'blur'}],
    cost: [{required: true, message: '成本为必填项', trigger: 'blur'}],
    price: [{required: true, message: '售价为必填项', trigger: 'blur'}]
  },

  pagination: reactive({//分页相关模型数据
    currentPage: 1,//当前页码
    pageSize: 3,//每页显示的记录数
    total: 0,//总记录数
    // billNumber: "",
    type: "",
    // cost:"",
    // price:""
  })

});

// 处理分页大小变更
const handleSizeChange = (pageSize) => {
  state.pagination.pageSize = pageSize;
  selectPackage();
};

// 处理页码变更
const handlePageChange = (currentPage) => {
  //把选中的页码换成当前页
  state.pagination.currentPage = currentPage;
  //重新查询
  selectPackage();
};

// 分页模糊查询
const selectPackage = () => {

  instance.post('/package/'+state.pagination.currentPage+"/"+state.pagination.pageSize+"/"+state.pagination.type,state.formData).then(res => {
    console.log(res.data);
    state.pagination.currentPage=res.data.current;
    state.pagination.pageSize=res.data.size;
    state.pagination.total=res.data.total;
    state.dataList = res.data.records;
  })
  //     .catch(error => {
  //   console.log(error);
  // });
}


//弹出添加窗口
const addPackage = () => {
  console.log("8888")
  state.dialogFormVisible = true;
  resetForm();
}

//添加
const handleAdd= () =>{
  // 添加数据到数据库
  // 是需要真正添加到后台的数据
  console.log(state.addData)
  instance.post("/package/",state.addData).then((resp) => {

    if (resp.flag) {
      state.dialogFormVisible = false;
      ElMessage.success("添加成功");
      // state.$message.success(res.data.msg);
      // 温馨提示
    }else {
      ElMessage.success("添加失败");
      // state.$message.error(res.data.msg);
    }
  }).finally(()=>{
    //2.重新加载数据
    selectPackage()
  });
}

// 弹出编辑窗口
const handleUpdate=(row) =>{
  // 把编辑窗口打开
  state.dialogFormVisible4Edit=true;
  //把该行数据获取并动态显示
  instance.get("/package/"+row.id).then((resp)=>{
    state.updateData=resp.data;
    //console.log(resp)
  });
}
// 修改
const handleEdit=()=> {
  //修改之后的数据进行保存
  instance.put("/package",state.updateData).then((resp)=>{
    //添加成功之后需要把添加页面关闭
    //是基于添加成功才关闭添加页面
    if(resp.flag) {
      state.dialogFormVisible4Edit=false;
      //温馨提示
      ElMessage.success("修改成功");
    }else {
      ElMessage.success("修改失败");
    }
  }).finally(()=>{
    //修改成功之后还需要重新加载数据
    selectPackage();
  })
}


//重置表单
const resetForm = () => {
  // 把上个步骤提交的数据清空
  state.addData = {};
}

//取消
const cancel = () => {
  state.dialogFormVisible = false;
  state.dialogFormVisible4Edit = false;
  // this.$message.info("操作取消");
}


const handleDelete = (row) => {
  ElMessageBox.confirm('确定删除该订单吗？', '确认删除', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
      .then(() => {
        // User confirmed, proceed with deletion
        instance.delete("/package/" + row.id)
            .then((res) => {
              if (res.flag) {
                ElMessage.success("删除成功");
              } else {
                ElMessage.error("删除失败");
              }
            })
            .finally(() => {
              selectPackage();
            });
      }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除',
    })
  });
};

selectPackage();

</script>

<style scoped>
.dialog-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>